<template>
    <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">

        <template slot="50739" slot-scope="scope">
            <!-- 自定义 -->
            <!-- 通过 v-model="scope.model.50739" 绑定数据 -->
        </template>

        <template slot="123" slot-scope="scope">
            <!-- 自定义 -->
            <!-- 通过 v-model="scope.model.123" 绑定数据 -->
        </template>

    </fm-generate-form>
</template>

<script>
export default {
    data: function() {
        return {
            jsonData: { 'list': [{ 'type': 'time', 'name': '时间选择器', 'icon': 'icon-time', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'isRange': false, 'arrowControl': true, 'format': 'HH:mm:ss', 'required': false, 'width': '', 'remoteFunc': 'func_1553955075000_12751' }, 'key': '1553955075000_12751', 'model': 'time_1553955075000_12751', 'rules': [] }, { 'type': 'select', 'name': '下拉选择框', 'icon': 'icon-select', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': false, 'filterable': false, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1553955078000_3937' }, 'key': '1553955078000_3937', 'model': 'select_1553955078000_3937', 'rules': [] }, { 'type': 'editor', 'name': '编辑器', 'icon': 'icon-fuwenbenkuang', 'options': { 'defaultValue': '', 'width': '', 'remoteFunc': 'func_1553955121000_360' }, 'key': '1553955121000_360', 'model': 'editor_1553955121000_360', 'rules': [] }, { 'type': 'blank', 'name': '自定义', 'icon': 'icon-ic', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1553955150000_50739' }, 'key': '1553955154000_76661', 'model': '50739', 'rules': [] }, { 'type': 'blank', 'name': '自定义', 'icon': 'icon-ic', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1553955150000_50739' }, 'key': '1553955150000_50739', 'model': '123', 'rules': [] }], 'config': { 'labelWidth': 120, 'labelPosition': 'right', 'size': 'small' }},
            editData: {},
            remoteFuncs: {

            }
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.generateForm.getData().then(data => {
                // 数据校验成功
                // data 为获取的表单数据
            }).catch(e => {
                // 数据校验失败
            })
        }
    }
}
</script>

